<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>162综合案例</title>
  <style>
    /* 纯css实现tab切换效果 */
    button:active,
    button:focus {
      background-color: green;
      color: white;
    }

    li {
      float: left;
    }
  </style>
</head>

<body>
  <div>
    <h1>162综合案例</h1>
    <div class="tab">
      <button class="s">0-100元</button>
      <button class="m">100-300元</button>
      <button class="l">300元以上</button>
      <button>全部</button>
    </div>
    <ul id="goodsList"></ul>
  </div>
  <script>
    const goodsList = [
      {
        id: '001',
        name: '电饭煲',
        price: 99,
        picture: './image/电饭煲.png'
      },
      {
        id: '002',
        name: '电饭煲',
        price: 111,
        picture: './image/电饭煲.png'
      },
      {
        id: '003',
        name: '电饭煲',
        price: 122,
        picture: './image/电饭煲.png'
      },
      {
        id: '004',
        name: '电饭煲',
        price: 133,
        picture: './image/电饭煲.png'
      },
      {
        id: '005',
        name: '电饭煲',
        price: 144,
        picture: './image/电饭煲.png'
      },
      {
        id: '006',
        name: '电饭煲',
        price: 155,
        picture: './image/电饭煲.png'
      },
      {
        id: '007',
        name: '电饭煲',
        price: 166,
        picture: './image/电饭煲.png'
      },
      {
        id: '008',
        name: '电饭煲',
        price: 999,
        picture: './image/电饭煲.png'
      }
    ]
    let oBtns = document.querySelectorAll('button')
    let oUl = document.querySelector('#goodsList')

    function render(goods) {
      let htmlContext = ''
      goods.forEach(item => {
        const { name, price, picture } = item
        htmlContext += `
        <li>
          <img src="${picture}">
          <p>${name}</p>
          <p>${price}元</p>
        </li>
      `
      })
      oUl.innerHTML = htmlContext
    }

    oBtns.forEach(item => {
      let filterGoodsList = goodsList
      item.addEventListener('click', function () {
        if (item.className === 's') {
          filterGoodsList = goodsList.filter(item => {
            return item.price < 100
          })
        } else if (item.className === 'm') {
          filterGoodsList = goodsList.filter(item => {
            return item.price >= 100 && item.price < 300
          })
        } else if (item.className === 'l') {
          filterGoodsList = goodsList.filter(item => {
            return item.price >= 300
          })
        }
        render(filterGoodsList)
      })
    })

    render(goodsList)
  </script>
</body>

</html>